<template>
  <div>
  <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide><img width="100%" height="100%" src="../../assets/image/banner.png" alt=""></swiper-slide>
    <swiper-slide><img width="100%" height="100%" src="../../assets/image/banner.png" alt=""></swiper-slide>
    <swiper-slide><img width="100%" height="100%" src="../../assets/image/banner.png" alt=""></swiper-slide>
    <swiper-slide><img width="100%" height="100%" src="../../assets/image/banner.png" alt=""></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
  </swiper>
  <!-- 轮播组件结束 -->
    <div class="zj1"><li ><img src="../../assets/image/news_one.png"></li> <sur class="zj1-li"><li class="md">面对消费升级下的消费偏好转移，不再以价导向满足基础需求，上升为获得</li> <li data-v-3a30c7af="" class="zj1-sj">{{detail.creatTime}} <font style="padding-left:30px;">管理员</font>
         &nbsp;&nbsp;&nbsp;
        <span ><img src="../../assets/image/mo.png">&nbsp;{{detail.comment}}</span></li></sur>
    </div>
    <!-- 2 -->
    <div data-v-3a30c7af="" class="zj2"><span data-v-3a30c7af="" class="md">
            面对消费升级下的消费偏好转移，不再以价导向满足基础需求，上升为获得

          </span>
           <span class="sp">
            <li>
              <img src="/static/img/pg1.24f7fb7.png">
</li> <li class="img-left">
              <img src="/static/img/pg1.24f7fb7.png">
            </li> <li  class="img-left">
              <img  src="/static/img/pg1.24f7fb7.png"></li> <li class="img-left"><img src="/static/img/pg1.24f7fb7.png"></li></span> <span class="sp1">
            {{detail.creatTime}} <font style="padding-left:30px;">管理员</font> <li style="margin-left:300px;"><img src="../../assets/image/mo.png">&nbsp;{{detail.comment}}</li></span></div>

            <div class="zj1"><li ><img src="../../assets/image/news_one.png"></li> <sur class="zj1-li"><li class="md">面对消费升级下的消费偏好转移，不再以价导向满足基础需求，上升为获得</li> <li data-v-3a30c7af="" class="zj1-sj">{{detail.creatTime}} <font style="padding-left:30px;">管理员</font>
         &nbsp;&nbsp;&nbsp;
        <span ><img src="../../assets/image/mo.png">&nbsp;{{detail.comment}}</span></li></sur>
    </div>
    <!-- 2 -->
    <div data-v-3a30c7af="" class="zj2"><span data-v-3a30c7af="" class="md">
            面对消费升级下的消费偏好转移，不再以价导向满足基础需求，上升为获得

          </span>
           <span class="sp">
            <li>
              <img src="../../assets/image/pg1.png">
            </li> 
            <li class="img-left">
              <img src="../../assets/image/pg1.png">
            </li> <li  class="img-left">
              <img  src="../../assets/image/pg1.png"></li> <li class="img-left"><img src="../../assets/image/pg1.png"></li></span> <span class="sp1">
            {{detail.creatTime}} <font style="padding-left:30px;">管理员</font> <li style="margin-left:300px;"><img src="../../assets/image/mo.png">&nbsp;{{detail.comment}}</li></span></div>
  </div>
</template>
<script>
import Services from '@/service/service'
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      swiperOption: {
        //swiper3
        autoplay: 3000,
        speed: 1000,
        loop: true,
        autoplayDisableOnInteraction: false,
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",
        paginationClickable: true,
        pagination: ".swiper-pagination",
        detail:{
          creatTime:this.detail.creatTime,
          comment:this.detail.comment
        }
      }
    };
  },
  created() {
   
     let data={
      param:{
        detail:{
          creatTime:this.detail.creatTime,
          comment:this.detail.comment
        }
      }
    };
    Services.myAjax({
     data:data,
     method: "post",
     url: Services.baseUrl + "/hot4"
   });
  },
  methods: {},
  components: {
    swiper,
    swiperSlide
  }
};
</script>
<style lang="scss" scoped>
.zj1 {
  border-top: 1px solid #ccc;
  display: inline-flex;
  align-items: flex-end;
  margin-top: 30px;
  li {
    margin-top: 20px;
  }
}
.md {
  font-size: 19px;
  line-height: 30px;
  font-weight: bold;
}
.zj1-li li {
  margin-left: 20px;
}
.zj1-sj {
  font-size: 14px;
  color: #333;
}
.zj1-sj span {
  margin-left: 200px;
}
.zj2 {
  border-top: 1px solid #ccc;
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  span {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
  }
}
.sp img {
  width: 187px;
}
.img-left {
  margin-left: 10px;
}
.sp1 {
  @extend .zj1-sj;
}
</style>

